import { Tabs, Button, Modal, Tree, Space, Radio } from "antd";
import React, { useState, useEffect } from "react";
import { ApartmentOutlined, DownOutlined } from "@ant-design/icons";
import instance from "../axios/request";
function SelectChengyuan(props:any) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
    setfuzeren(value1.name);
    SetBgcolor(value1.bgColor);
    SetHead(value1.head);
    props.chengyuan(value1.name);
  };
  const [bgColor, SetBgcolor] = useState("");
  const [head, SetHead] = useState("");
  const [curfuzeren, setfuzeren] = useState("选择成员");
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const initData = () => {
    instance
      .get("/Department/list")
      .then((res) => {
        const treeData = [];
        treeData.push({
          title: "所有部门",
          key: "0-0",
          children: [],
        });

        treeData[0].children = res.data.map((item) => {
          return {
            title: item.name,
            key: item.id,
          };
        });
        setTreeData(treeData);
      })
      .catch((e) => {});

    instance
      .get("/Manage/list")
      .then((res) => {
        if (res.code === 200) {
          // setData(arr)
          setallChengyuanoptions(
            res.data.map((item) => {
              return {
                id: item.department_id,
                label: (
                  <div style={{ width: "20vw" }}>
                    <span
                      style={{
                        display: "inline-block",
                        margin: "10px",
                        width: "30px",
                        height: "30px",
                        lineHeight: "30px",
                        color: "white",
                        textAlign: "center",
                        background: "red",
                        borderRadius: "50%",
                      }}
                    >
                      {" "}
                      {typeof item.name == "string" ? item.name[0] : item.name}
                    </span>{" "}
                    <span>{item.name}</span>
                  </div>
                ),
                value: { name: item.name, bgColor: "red", head: item.name[0] },
              };
            })
          );
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };
  useEffect(() => {
    initData();
  }, []);

  const onSelect = (selectedKeys, info) => {
    setChengyuanoptions(
      allchengyuanoptions.filter((item) => {
        return item.id === selectedKeys[0];
      })
    );
  };
  const [treeData, setTreeData] = useState([
    {
      title: "帆软软件公司",
      key: "0-1",
      children: [
        {
          title: "市场部",
          key: "0-0-0",
        },
        {
          title: "采购部",
          key: "0-0-1",
        },
        {
          title: "生产部",
          key: "0-0-2",
        },
        {
          title: "人事部",
          key: "0-0-3",
        },
        {
          title: "销售部",
          key: "0-0-4",
        },
        {
          title: "研发部",
          key: "0-0-5",
        },
        {
          title: "测试部",
          key: "0-0-6",
        },
        {
          title: "产品部",
          key: "0-0-7",
        },
        {
          title: "后端",
          key: "0-0-8",
        },
        {
          title: "前端",
          key: "0-0-9",
        },
        {
          title: "文档",
          key: "0-0-10",
        },
        {
          title: "视觉",
          key: "0-0-11",
        },
        {
          title: "交互",
          key: "0-0-12",
        },
        {
          title: "质量部",
          key: "0-0-13",
        },
        {
          title: "杭州大区",
          key: "0-0-14",
        },
        {
          title: "行政部",
          key: "0-0-15",
        },
        {
          title: "安全部",
          key: "0-0-16",
        },
      ],
    },
  ]);
  const onradioChange = (e) => {
    setValue1(e.target.value);
  };
  const [chengyuanoptions, setChengyuanoptions] = useState([]);
  const [allchengyuanoptions, setallChengyuanoptions] = useState([]);
  const [value1, setValue1] = useState({});
  const chengyuanitems = [
    {
      key: "1",
      label: "组织架构",
      children: (
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <Tree
            rootStyle={{ width: "50%", height: "400px", overflow: "auto" }}
            showIcon
            switcherIcon={<DownOutlined />}
            icon={<ApartmentOutlined style={{ color: "#00b899" }} />}
            defaultExpandAll={true}
            onSelect={onSelect}
            treeData={treeData}
          />
          <Space direction="vertical">
            <Radio.Group
              options={chengyuanoptions}
              style={{ width: "50%" }}
              onChange={onradioChange}
              value={value1}
            ></Radio.Group>
          </Space>
        </div>
      ),
    },
    {
      key: "2",
      label: "成员",
      children: (
        <Space direction="vertical">
          <Radio.Group
            options={allchengyuanoptions}
            style={{ width: "50%" }}
            onChange={onradioChange}
            value={value1}
          ></Radio.Group>
        </Space>
      ),
    },
    {
      key: "3",
      label: "当前用户",
      children: "Content of Tab Pane 3",
    },
  ];
  const onChange = (date, dateString) => {
    console.log(date, dateString);
  };
  return (
    <div>
      <Button
        style={{ width: "100%", border: "1px dashed black" }}
        type="text"
        defaultValue="选择成员"
        onClick={showModal}
      >
        <div style={{ display: "flex", justifyContent: "flex-start" }}>
          <span
            style={{
              display: "inline-block",
              marginRight: "5px",
              width: "20px",
              height: "20px",
              lineHeight: "20px",
              color: "white",
              textAlign: "center",
              background: bgColor,
              borderRadius: "50%",
            }}
          >
            {head}
          </span>{" "}
          <span>{curfuzeren}</span>
        </div>
      </Button>
      <Modal
        width={"1000px"}
        centered
        title="选择数据"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Tabs defaultActiveKey="1" items={chengyuanitems} onChange={onChange} />
      </Modal>
    </div>
  );
}

export default SelectChengyuan;
